<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!--  显示内容 -->

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="font-family: '微软雅黑';">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			${module } <small>Control panel</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="${ctx }"><i class="fa fa-dashboard"></i>主页</a></li>
			<li class="active">角色列表</li>
		</ol>
	</section>

	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header">

						<!-- 显示查询条件 2015年6月23日14:57:58 -->
						<table style="font-size: 12px; width: 100%; text-align: left;">
							<tr>
								<td>
									<h4>
										<b>&nbsp;&nbsp;&nbsp;&nbsp;角色名称&nbsp;&nbsp;&nbsp;&nbsp;</b>
									</h4>
								</td>
								<td><input type="text" class="form-control"
									id="rolename_input" style="width: 150px;"
									placeholder="Enter Rolename" /></td>

								<td>
									<h4>
										<b>&nbsp;&nbsp;&nbsp;&nbsp;激活状态&nbsp;&nbsp;&nbsp;&nbsp;</b>
									</h4>
								</td>
								<td><select id="status_select" class="form-control"
									style="width: 150px;">
										<option value="0">请选择</option>
										<option value="1">激活</option>
										<option value="2">未激活</option>
								</select></td>

								<td style="width: 150px;">
									<button class="btn btn-block btn-success" style="width: 100px;"
										id="query_button">查询</button>
								</td>
								<td style="width: 150px;">
									<button class="btn btn-block btn-success" style="width: 100px;"
										id="delete_button">删除</button>
								</td>


							</tr>
						</table>

					</div>
					<!-- /.box-header -->
					<div class="box-body">
						<table id="table_list" class="table table-bordered table-hover"
							style="font-size: 12px;">
							<thead>
								<tr>
									<th>&nbsp;</th>
									<th style="width: 80px;">角色编号</th>
									<th style="width: 180px;">角色名称</th>
									<th style="width: 80px;">使用状态</th>
									<th style="width: 120px;">创建时间</th>
									<th style="width: 80px;">修改时间</th>
								</tr>
							</thead>
							<tbody id="list_tbody">
								<!--  使用ajax加载了内容 2015年6月23日10:26:33 -->
							</tbody>

							<!--  使用分页插件 2015年6月23日10:56:51 -->
							<tfoot>
								<tr>
									<th colspan="8" style="text-align: right;">
										<div class="btn-group" id="page_tfoot">

											<!--  显示上一页 按钮 2015年6月23日12:38:35 -->

											<!--  显示下一页 按钮 2015年6月23日12:38:47 -->

										</div>
									</th>
								</tr>
							</tfoot>
						</table>
					</div>
					<!-- /.box-body -->


					<!--  显示 增加功能的控件 2015年7月8日10:13:14  -->
						<div class="box-body">
							<table style="width: 100%; text-align: left;">
								<tr>
									<td>
										<h6>
											<input type="hidden" id="roleid_input_edit"/>
											<b>&nbsp;&nbsp;&nbsp;&nbsp;角色名称&nbsp;&nbsp;&nbsp;&nbsp;</b>
										</h6>
									</td>
									<td>
										<input type="text" class="form-control"
											id="rolename_input_edit" style="width: 150px;"
											placeholder="Enter Rolename" />
									</td>
									
									<td>
										<h6>
											<b>&nbsp;&nbsp;&nbsp;&nbsp;激活状态&nbsp;&nbsp;&nbsp;&nbsp;</b>
										</h6>
									</td>
									<td>
										<select id="status_select_edit" class="form-control"
											style="width: 150px;">
												<option value="0">请选择</option>
												<option value="1">激活</option>
												<option value="2">未激活</option>
										</select>
									</td>
									<td>
										<button class="btn btn-block btn-success" style="width: 100px;"
											id="edit_button">增加</button>
									</td>
								</tr>
							</table>
							
						</div>
						<!-- /.box-body -->

				</div>
				<!-- /.box -->

			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
		
		<!--  显示下面的分页控件  -->
		<!-- 显示 增加的div -->
	</section>
	<!-- /.content -->
</div>

<jsp:include page="../js.jsp"/>

<!-- page script -->
<script type="text/javascript">
	// 跳转到当前的页面 2015年6月24日16:47:40
	function current(m_index) {
		index = m_index;
		query(m_index, rolename_c, status_c);
	}

	function prev(m_index) {
		// 判断传过来的m_index
		if (parseInt(m_index) < 1) {
			return;
		}
		index = m_index;
		query(m_index, rolename_c, status_c);
	}

	function next(m_index) {
		// 判断传过来的m_index
		if (parseInt(m_index) > psize) {
			return;
		}
		index = m_index;
		query(m_index, rolename_c, status_c);
	}

	// 查询条件的变量
	var rolename_c = '';
	var status_c = '';

	
	// 封装一下查询的方法 以及拼接的查询条件
	function query(_index, rolename, status) {
		if (_index == null || _index == '' || _index == 'null'
				|| _index == 'undefine') {
			_index = 1;
		}
		// 使用jQuery的ajax来调用这个 查询的url 2015年6月24日14:12:57
		// 数字处理

		if (status == null || status == '' || status == 'null'
				|| status == 'undefine') {
			status = 0;
		}

		// 判断传过来的参数 是否是null '' undefine 'null'
		$.post(
						'<c:url value="/role/page"/>',
						{
							rolename : rolename,
							status : status,
							page : _index
						},
						function(data) {
							var result = data;
							var order_list = result.rows;
							var context_html = "";

							// 获取 查询后的数据的数目 2015年6月24日14:31:39
							var list_total = result.total;
							// 使用遍历
							$(order_list)
									.each(
											function() {

												// 转换 
												var status = "";

												if (this.status != null
														&& this.status != ''
														&& this.status != 'undefine') {
													if (this.status == '1') {
														status = '激活';
													} else {
														status = '未激活';
													}
												}

												context_html += "<tr><td><input type='checkbox' value="+this.roleid+"></td><td>"
														+ this.roleid
														+ "</td><td>"
														+ this.rolename
														+ "</td><td>"
														+ status
														+ "</td><td>"
														+ this.createtime
														+ "</td><td>"
														+ this.updatetime
														+ "</td></tr>";

											});
							$("#list_tbody").html(context_html);
							// 调用分页的方法 
							Paging(index, size, list_total);
						},"JSON");
	}

	// 加载查询条件下面的 订单类型 2015年6月23日16:01:47

	// 在页面加载的时候  
	$(document).ready(function() {
		
		
		
		// 点击编辑功能按钮 2015年7月8日11:09:12
		$("#edit_button").click(function(){
			// 获取文本下面的几个参数的值
			var roleid = $("#roleid_input_edit").val();
			var rolename = $("#rolename_input_edit").val();
			var status = $("#status_select_edit").val();
			if(roleid==null || roleid==''){
				roleid = 0;
			}
			// 判断rolename
			if(rolename==null || rolename == ''){
				return;
			}
			
			$.post('<c:url value="role/role/edit"/>',{roleid:roleid,rolename:rolename,status:status},function(data){
				var result = jQuery.parseJSON(data);
				if (result.DATA == 'SUCCESS') {
					$("#rolename_input_edit").val('');
					$("#status_select_edit").val('0')
					// 如果成功了  就调用对应的查询
					query(1, rolename_c, status_c);
				}
			});
		});
		
		// 点击删除按钮 要加载的事件 2015年6月24日17:06:17
		$("#delete_button").click(function() {
			var ids = '';
			// 获取这个table下面 checked 
			$("table[id='table_list'] tbody tr").each(function(i) {
				var ch_id = $(this).find("td input");
				// 判断这个order控件是否是选中
				if (ch_id.is(':checked')) {
					ids += ch_id.val() + ',';
				}
			});

			// 处理ids
			if (ids != null && ids != '' && ids.length > 1) {
				ids = ids.substring(0, ids.length - 1);
			}

			// 调用删除方法
			$.post('<c:url value="/role/batch/delete"/>', {
				roleids : ids
			}, function(data) {
				var result = data;
				if (result.DATA == 'SUCCESS') {
					// 如果成功了  就调用对应的查询
					query(1, rolename_c, status_c);
				}
			},"JSON");

		});

		// 第一次加载的时候  先加载的查询 和 要加载的分页效果 2015年6月24日14:23:58
		query(1, null, null, null);

		// 点击查询按钮 2015年6月23日17:01:18
		$("#query_button").click(function() {
			status_c = $("#status_select").val();
			rolename_c = $("#rolename_input").val();
			query(1, rolename_c, status_c);
		});

	});
</script>

	<%@ include file="../footer.jsp"%>
	</body>
</html>